<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-03-31 11:44:38
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-07 10:40:33
-->
<template>
  <div>
    <el-dialog
      :title="copyTitle"
      :visible.sync="dialog.dialogCopyShow"
      width="50%"
      v-loading="loading"
      @close="copyClose"
    >
      <div class="layerOne" v-if="seniorShow">
        <el-form
          :model="CopyForm"
          ref="CopyForm"
          :rules="copyRules"
          label-position="top"
        >
          <el-form-item label="项目名称">
            <el-input
              v-model="CopyForm.name"
              style="width: 400px"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目计划时间">
            <el-date-picker
              v-model="CopyForm.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始时间"
            >
            </el-date-picker>
            ————
            <el-date-picker
              v-model="CopyForm.finishTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目简介">
            <el-input
              v-model="CopyForm.remark"
              placeholder="请输入项目简介"
              type="textarea"
              rows="4"
              size="normal"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="isRetain">
              项目只保留项目设置，不复制任务
            </el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <div class="layerTwo" v-else>
        <el-form
          :model="CopyForm"
          ref="CopyForm"
          :rules="copyRules"
          label-position="top"
        >
          <el-form-item label="项目负责人">
            <div class="responsible">
              <div class="responsible-img" v-if="responsibleId">
                <img :src="avatar" alt="" />
                <i class="iconfont icon-cuowu" @click="delResponsible"></i>
              </div>
              <div class="responsible-add" v-else>
                <img
                  src="../../../../assets/images/addPersonal.png"
                  alt=""
                  @click="addResponsible"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="项目成员">
            <div class="participate">
              <div
                v-for="(item, index) in participateList"
                :key="index"
                class="participate-xh"
              >
                <div class="participate-img">
                  <el-tooltip
                    :content="item.userName"
                    placement="top"
                    effect="dark"
                  >
                    <div class="member">
                      <img :src="item.avatar" alt="" />
                    </div>
                  </el-tooltip>
                </div>
                <i class="iconfont icon-cuowu" @click="delMember(index)"></i>
              </div>
              <div>
                <img
                  src="../../../../assets/images/addPersonal.png"
                  alt=""
                  @click="addParticipants"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="任务名称">
            <el-radio-group v-model="taskRadio" @change="radioChange">
              <div>
                <el-radio label="1">
                  任务名称添加前缀
                  <el-input
                    v-model="CopyForm.prefix"
                    placeholder="请输入"
                    size="normal"
                    style="margin-top: 10px; width: 100px"
                    clearable
                    v-if="taskRadio == 1"
                  ></el-input
                ></el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio label="2">
                  任务名称添加后缀
                  <el-input
                    v-model="CopyForm.suffix"
                    placeholder="请输入"
                    size="normal"
                    style="margin-top: 10px; width: 100px"
                    clearable
                    v-if="taskRadio == 2"
                  ></el-input
                ></el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio label="3"> 任务名称文本替换 </el-radio>
                <div class="replaceTask" v-if="taskRadio == 3">
                  <el-input
                    v-model="replaceStart"
                    placeholder="请输入"
                    style="width: 200px"
                    clearable
                  ></el-input>
                  <div style="font-size: 14px; margin: 0 10px">替换为</div>
                  <el-input
                    v-model="replaceEnd"
                    placeholder="请输入"
                    style="width: 200px"
                    clearable
                  ></el-input>
                </div>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="时间计划">
            <el-radio-group v-model="timeRadio" @change="timeChange">
              <div>
                <el-radio label="1"> 保留所有任务的起止时间 </el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio label="2">
                  所有任务计划时间顺延
                  <el-input
                    v-model="CopyForm.delayDate"
                    size="normal"
                    style="margin-top: 10px; width: 80px"
                    clearable
                    v-if="timeRadio == 2"
                  >
                  </el-input>
                  天
                </el-radio>
              </div>
              <div style="margin-top: 10px">
                <el-radio label="3"> 清空所有新任务的起止时间 </el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" v-if="seniorShow">
        <div class="footer-left">
          <el-button
            type="primary"
            size="default"
            v-if="!isRetain"
            @click="seniorOption"
          >
            高级选项
          </el-button>
        </div>
        <div class="footer-right">
          <el-button @click="dialog.dialogCopyShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">创建</el-button>
        </div>
      </span>
      <span slot="footer" v-else>
        <div class="footer-left"></div>
        <div class="footer-right">
          <el-button @click="previousStep">上一步</el-button>
          <el-button type="primary" @click="onSubmit">创建</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 新增参与人 -->
    <el-dialog
      title="新增项目成员"
      :visible.sync="participantsShow"
      width="30%"
      @close="participantsClose"
    >
      <div class="participants">
        <el-select v-model="userIds" multiple placeholder="请选择参与人">
          <el-option
            v-for="item in chargerOptions"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer">
        <el-button @click="participantsShow = false">取消</el-button>
        <el-button type="primary" @click="participantsSubmit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 更换项目责任人 -->
    <el-dialog
      title="更换项目负责人"
      :visible.sync="responsibleShow"
      width="30%"
      @close="responsibleClose"
    >
      <div class="participants">
        <el-select v-model="CopyForm.userId" placeholder="请选择负责人">
          <el-option
            v-for="item in chargerOptions"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer">
        <el-button @click="responsibleShow = false">取消</el-button>
        <el-button type="primary" @click="responsibleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { copyProject } from "@/api/task/projectManagement";
import { getNoRepeatPersonLiable } from "@/api/CRM/comtact";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // let a = this.CopyForm.name.indexOf("(");
    let b = this.CopyForm.name[this.CopyForm.name.length - 1];
    console.log(b);
    // console.log(a);
    if (b !== ")") {
      this.CopyForm.name = this.CopyForm.name + "(1)";
    } else {
      let name = this.CopyForm.name.split("(");
      console.log(name);
      let num = this.CopyForm.name.match(/\(([^)]*)\)/)[1] - 0 + 1;
      this.CopyForm.name = name[0] + "(" + num + ")";
    }
  },
  data() {
    return {
      loading: false,
      avatar: this.drawerData.avatar,
      isRetain: false,
      participateList: this.drawerData.members,
      chargerOptions: [],
      userIds: [],
      participantsShow: false,
      responsibleShow: false,
      timeRadio: "1",
      replaceStart: "",
      replaceEnd: "",
      taskRadio: "1",
      seniorShow: true,
      copyRules: {},
      responsibleId: this.drawerData.userId,
      CopyForm: {
        id: this.drawerData.id,
        name: this.drawerData.name,
        startTime: this.drawerData.startTime,
        finishTime: this.drawerData.finishTime,
        remark: this.drawerData.remark,
        includTask: null,
        userId: this.drawerData.userId,
        userIds: this.drawerData.userIds,
        prefix: null,
        suffix: null,
        replace: null,
        retainDate: null,
        delayDate: null,
        replaceclearDate: null,
      },
      copyTitle: "复制项目",
    };
  },
  methods: {
    responsibleClose() {
      if (this.responsibleId == "") {
        this.responsibleId = this.CopyForm.userId;
      }
    },
    // 确定更换负责人
    responsibleSubmit() {
      console.log(this.CopyForm.userId);
      let a = this.chargerOptions.forEach((item, index) => {
        if (item.userId == this.CopyForm.userId) {
          this.avatar = this.chargerOptions[index].avatar;
          this.responsibleId = this.chargerOptions[index].userId;
        }
      });
      this.responsibleShow = false;
    },
    addResponsible() {
      this.responsibleShow = true;
      this.getAllChargeList();
    },
    // 删除项目负责人
    delResponsible() {
      this.responsibleId = "";
      this.addResponsible();
    },
    // 删除项目参与者
    delMember(i) {
      this.participateList.splice(i, 1);
      this.drawerData.userIds.splice(i, 1);
    },
    // 关闭新增参与人
    participantsClose() {
      this.userIds = [];
    },
    // 确认新增
    participantsSubmit() {
      if (this.CopyForm.userIds === null) {
        this.CopyForm.userIds = [];
      }
      if (this.drawerData.members == null) {
        this.participateList = [];
      }
      this.userIds.forEach((item) => {
        this.chargerOptions.forEach((item1) => {
          console.log(item1);
          if (item1.userId == item) {
            this.participateList.push(item1);
            this.CopyForm.userIds.push(item);
            this.participantsShow = false;
          }
        });
      });
    },
    //获取负责人
    getAllChargeList() {
      getNoRepeatPersonLiable().then((res) => {
        this.chargerOptions = res.data;
      });
    },
    //获取负责人
    getChargeList() {
      this.drawerData.userIds = this.CopyForm.userIds;
      getNoRepeatPersonLiable(this.drawerData.userIds).then((res) => {
        this.chargerOptions = res.data;
      });
    },
    // 新增参与人
    addParticipants() {
      this.participantsShow = true;
      this.getChargeList();
    },
    // 高级选项
    seniorOption() {
      this.seniorShow = false;
      this.copyTitle = "高级选项";
    },
    // 上一步
    previousStep() {
      this.seniorShow = true;
      this.copyTitle = "复制项目";
    },
    // 时间计划切换
    timeChange(val) {
      if (val == 1) {
        this.CopyForm.retainDate = true;
        this.CopyForm.delayDate = null;
        this.CopyForm.clearDate = null;
      } else if (val == 2) {
        this.CopyForm.retainDate = null;
        this.CopyForm.clearDate = null;
      } else if (val == 3) {
        this.CopyForm.retainDate = null;
        this.CopyForm.delayDate = null;
        this.CopyForm.clearDate = true;
      }
    },
    // 人物名称修改切换
    radioChange(val) {
      if (val == 1) {
        this.CopyForm.suffix = null;
        this.CopyForm.replace = null;
      } else if (val == 2) {
        this.CopyForm.prefix = null;
        this.CopyForm.replace = null;
      } else if (val == 3) {
        this.CopyForm.prefix = null;
        this.CopyForm.suffix = null;
      }
    },
    // 关闭
    copyClose() {
      this.dialog.dialogCopyShowEject = false;
      this.CopyForm = {
        id: this.drawerData.id,
        name: this.drawerData.name,
        startTime: this.drawerData.startTime,
        finishTime: this.drawerData.finishTime,
        remark: this.drawerData.remark,
        includTask: null,
        userId: this.drawerData.userId,
        userIds: this.drawerData.userIds,
        prefix: null,
        suffix: null,
        replace: null,
        retainDate: null,
        delayDate: null,
        replaceclearDate: null,
      };
    },
    // 创建
    onSubmit() {
      this.loading = true;
      if (this.replaceStart !== "" && this.replaceEnd !== "") {
        this.CopyForm.replace = [];
        this.CopyForm.replace.push(this.replaceStart, this.replaceEnd);
        // this.CopyForm.replace.push()
      }
      console.log(this.CopyForm.replace);
      this.CopyForm.includTask = !this.isRetain;
      copyProject(this.CopyForm).then((res) => {
        this.loading = false;
        this.$message.success(res.msg);
        this.$parent.$parent.getList();
        this.dialog.dialogCopyShow = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-item {
  img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
}
.el-dialog__footer {
  span {
    display: flex;
    justify-content: space-between;
  }
}
.replaceTask {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.participate {
  display: flex;
  flex-wrap: wrap;
  .participate-xh {
    position: relative;
    i {
      position: absolute;
      top: -45%;
      left: -25%;
      color: red;
      cursor: pointer;
    }
    .participate-img {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      overflow: hidden;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.responsible {
  display: flex;
  .responsible-img {
    position: relative;
    i {
      position: absolute;
      top: -45%;
      left: -25%;
      color: red;
      cursor: pointer;
    }
  }
}
</style>